<template>
  <!-- 气象监测 -->
  <MainSlot>
    <template v-slot:table>
      <div class="material-box">
        <div class="material-box-other">
          <div class="material-box-other-title">气象局数据监测</div>
          <div class="material-box-other-date">{{ othercollectDatetime }}</div>
          <div class="material-box-other-list">
            <div v-for="(otherweatheritem, otherweatherindex) in otherweatherdata" :key="otherweatherindex"
              class="material-box-other-list-item">
              <div class="material-box-other-list-item-title">{{ otherweatheritem.dataItemName }}</div>
              <div class="material-box-other-list-item-message">{{ otherweatheritem.lastValue1 }}{{
                otherweatheritem.symbol }}</div>
            </div>
          </div>
        </div>
        <div class="material-box-left">
          <!-- <div class="material-box-left-title">气象数据监测</div> -->
          <div class="material-box-left-view">
            <!-- <div class="material-box-left-view-leftimg"></div> -->
            <div class="material-box-left-view-rightcontent">
              <div class="material-box-left-view-rightcontent-top">
                <div class="box-left-lineone">
                  <div class="wind-direction">
                    <div class="wind-direction-one">风向</div>
                    <div class="wind-direction-two">
                      {{ weatherquanquan.fenxiang
                      }}{{ weatherquanquan.fenxiangsymbol }}
                    </div>
                    <div class="wind-direction-one">风速</div>
                    <div class="wind-direction-two">
                      {{ weatherquanquan.fensu
                      }}{{ weatherquanquan.fensusymbol }}
                    </div>
                  </div>
                </div>
                <div class="box-left-linetwo">
                  <div v-for="(item, index) in weatherdataleftTop" :key="index" class="left-linetwo-item">
                    <img class="image-line" :src="getimageurl(item.dataTypeName)" />
                    <div class="mesge-line">
                      <div>{{ item.dataTypeName }}</div>
                      <div v-if="item.dataValue">{{ item.dataValue }}</div>
                      <div v-else="(item.dataTypeName !== '雨雪状态') && (item.dataTypeName !== '雨雪')">{{ item.lastValue1
                        }}{{
                          item.zhsymbol }}</div>
                      <div v-else="(item.dataTypeName === '雨雪状态') || (item.dataTypeName === '雨雪')">{{ item.lastValue1
                        ===
                        0 ? "正常" : "有雨雪" }}</div>
                      <div>{{ $moment(item.collectDatetime).format("YYYY-MM-DD hh:mm") }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="box-left-linethree">
                <div class="chance-type">
                  <div v-for="(item, index) in weatherdataleft" :key="index" class="chance-type-item" :class="{
                    'chance-type-item-select':
                      nowselectweathertypeindex === index,
                  }" @click="getzhexiandataleft(item.dataItemId, index, item.symbol)">{{ item.dataTypeName }}</div>
                </div>
                <div v-if="zhexiantulistone.xAxisdata.length > 0" ref="nowzheachrtid" class="nowzheachrt">
                  <zhechart :nowwidth="'100%'" :nowheight="nowechartsheight" :fontcolor="'#4381b5'"
                    :cdata="zhexiantulistone" :bottom="'20'" />
                </div>
                <div v-else class="nowzheachrt nowzheachrt-ds">
                  <h2>暂无数据</h2>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </MainSlot>
</template>
<script>
import MainSlot from "@/components/MainSlot";
import TableData from '@/components/TableData';
import zhechart from "@/components/Echarts/components/linechart/chart.vue";
import nowpagereq from "@/api/iotMonitoring/meteorologicalMonitoring.js";
import * as echarts from "echarts";

export default {
  name: "MeteorologicalMonitoring",
  components: { zhechart, MainSlot, TableData, },
  data() {
    return {
      weatherdatalefttwo: [],
      // 左侧选择某数据
      nowselectweathertypeindex: 0,
      // 左侧折线图数据
      zhexiantulistone: {
        xAxisdata: [],
        xData: [],
        seriesData: [],
        unitName: ""
      },
      nowechartsheight: "100%",
      // 左侧气象数据项
      weatherdataleft: [],
      weatherdataleftTop: [],
      // 圈圈里面的风向和风速
      weatherquanquan: {
        fenxiang: "--",
        fenxiangsymbol: "°",
        fensu: "--",
        fensusymbol: "km/h"
      },
      // 外部气象站数据
      otherweatherdata: [],
      othercollectDatetime: "",
      // test
      cdatatwo: {
        xAxisdata: [
          "1时",
          "2时",
          "3时",
          "4时",
          "5时",
          "6时",
          "7时",
          "8时",
          "9时",
          "10时"
        ],
        xData: ["贷款总额（万元）"],
        seriesData: [
          {
            name: "贷款总额（万元）",
            type: "bar",
            data: [1500, 1454, 2444, 1806, 5349, 3055, 3309, 1430, 3474, 2384],
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  { offset: 0, color: "#04FA99" },
                  { offset: 1, color: "#3EACE5" }
                ])
              }
            },
            z: -12
          }
        ]
      }
      // end
      // ---
    };
  },
  created() { },
  mounted() {
    this.getotherweatherdatalefttwo();
    this.getweatherdataleftTwo();
    this.$nextTick(() => {
      this.geteacharts();
    });
  },
  methods: {
    async getotherweatherdatalefttwo(list) {
      let res = await nowpagereq.getweatherdatalefttwo();
      let zhlist = res.data;
      console.log(zhlist);

      let newlist = [];
      zhlist.forEach((item, index) => {
        if (
          item.dataTypeName === "天气现象" ||
          item.dataTypeName === "风向描述"
        ) {
          let enumListTypelist = this.handenumListmet(item.enumListType);
          // console.log(item);
          // console.log(enumListTypelist);

          item.lastValue1 = enumListTypelist[item.lastValue1].name;
          item.symbol = "";
          newlist.push({ ...item });
        } else {
          newlist.push({ ...item });
        }
      });
      this.otherweatherdata = newlist;
      if (newlist.length) {
        this.othercollectDatetime = this.$moment(
          new Date()
        ).format("YYYY-MM-DD");
      }

      // console.log(newlist)
    },
    // 字符串处理方法
    handenumListmet(str) {
      let controlslist = [];
      var arr = str.split(";");
      for (var i = 0; i < arr.length; i++) {
        let diy = arr[i].split(":");
        controlslist.push({
          name: diy[1],
          value: diy[0]
        });
      }
      return controlslist;
    },
    // 动态获取echarts高度
    geteacharts() {
      if (this.zhexiantulistone.xAxisdata.length > 0) {
        let parentone = this.$refs.nowzheachrtid;
        let heightone = parentone.scrollHeight;
        this.nowechartsheight = heightone - 35 + "px";
      }
    },
    async getweatherdataleftTwo() {
      let res = await nowpagereq.getotherweatherdata();
      let dataList = res.data;
      dataList.forEach((item, index) => {
        let enumListType = item.enumListType
        if (enumListType) {
          enumListType = enumListType.slice(0, -1);
          let pairs = enumListType.split(';');
          let result = {};
          pairs.forEach(pair => {
            let [key, value] = pair.split(':');
            result[key] = value;
          });
          item.dataValue = result[item.lastValue1]
        }else{
          item.dataValue = item.lastValue1 + (item.symbol||'')
        };
      });
      this.weatherdataleft = dataList.filter(e=>!e.enumListType);
      this.weatherdataleftTop = dataList;
      console.log(dataList, dataList)
      this.getzhexiandataleft(
        this.weatherdataleft[0]?.dataItemId,
        0,
        this.weatherdataleft[0]?.symbol
      );
    },
    // 获取左侧折线图
    getzhexiandataleft(id, i, x) {
      // 用于样式切换
      this.nowselectweathertypeindex = i;
      // this.weatherdataleft[i]["nowselect"] = !this.weatherdataleft[i]["nowselect"]
      let now = new Date()
      let date = this.dateToFormattwo(now);
      let startTime = this.dateToFormattwo(now.setDate(now.getDate() - 7));
      let params = {
        dataItemId: id,
        endTime: `${date} 23:59:59`,
        startTime: `${startTime} 00:00:00`
      };
      nowpagereq.getzhexiandataleft(params).then(res => {
        this.handingzhexiangone(res.data, x);
      });
    },
    // 折线图数据处理
    handingzhexiangone(list, x) {
      // console.log(list)
      if (list === undefined || list.length === 0) {
        return;
      }
      let xAxisdata = [];
      let xData = [
        this.weatherdataleft[this.nowselectweathertypeindex]["dataTypeName"]
      ];
      let seriesData = [
        {
          name: this.weatherdataleft[this.nowselectweathertypeindex][
            "dataTypeName"
          ],
          type: "line",
          data: [],
          barWidth: 10,
          itemStyle: {
            normal: {
              barBorderRadius: 5,
              color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                { offset: 0, color: "#04FA99" },
                { offset: 1, color: "#3EACE5" }
              ])
            }
          }
        }
      ];
      list.forEach(item => {
        seriesData[0]["data"].push(item.value);
        let ggdate = this.dateToFormat(item.collectDatetime);
        xAxisdata.push(ggdate);
      });
      // console.log(x)
      this.zhexiantulistone = {
        xAxisdata: xAxisdata,
        xData: xData,
        seriesData: seriesData,
        unitName: x
      };
    },
    // 根据数据类型显示对应的图片地址
    getimageurl(name) {
      let url = "";
      switch (true) {
        case name.includes('pm10'):
          url = require("@/assets/weather-station/pm10.png");
          break;
        case name.includes('pm2.5'):
          url = require("@/assets/weather-station/pm2.5.png");
          break;
        case 14:
          url = require("@/assets/weather-station/guangzhaodu.png");
          break;
        case name.includes('湿度'):
          url = require("@/assets/weather-station/kongqishidu.png");
          break;
        case name.includes('温度'):
          url = require("@/assets/weather-station/kongqiwendu.png");
          break;
        case name.includes('噪音'):
          url = require("@/assets/weather-station/zaoyinzhi.png");
          break;
        case name.includes('雨雪'):
          url = require("@/assets/weather-station/yuxuezhuangtai.png");
          break;
        case name.includes('雨量'):
          url = require("@/assets/weather-station/yuliangzhi.png");
          break;
        case name.includes('气压'):
          url = require("@/assets/weather-station/daqiyaqiang.png");
          break;
        case name.includes('风速'):
          url = require("@/assets/weather-station/wind-direction.png");
          break;
        case name.includes('风'):
          url = require("@/assets/weather-station/wind-speed.png");
          break;
        case name.includes('天气'):
          url = require("@/assets/weather-station/yuxuezhuangtai.png");
          break;
        default:
          url = require("@/assets/weather-station/kongqishidu.png");
          break;
      }
      return url;
    },
    // 自动旋转角度方法
    testrorat() {
      let style = document.createElement("style");
      style.setAttribute("type", "text/css");
      document.head.appendChild(style);
      let sheet = style.sheet;
      let index = 0;
      let point = 20;
      // 根据每一个时钟的数据为页面添加不同的keyframes 0 为index
      sheet.insertRule(
        `@keyframes pointermove` +
        (index + 1) +
        `{
  			from {
			    transform: rotate(300deg);
  			}
 			 to {
   				 transform: rotate(` +
        (300 + point) +
        `deg);}
			}`,
        0
      );
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .zhcontent {
  overflow-y: initial !important;
}

::v-deep .slotModule {
  background-color: #f3f3f3;
  padding: 5px;
  box-shadow: 0 0 0 0 #00000000
}

.material-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.material-box-left {
  width: calc(100% - 390px);
  height: 100%;
  padding: 0 5px;

  .material-box-left-title {
    width: 240px;
    text-align: center;
    height: 36px;
    line-height: 36px;
    color: #4381b5;
    letter-spacing: 8px;
    font-size: 24px;
    // background-image: url('~@/assets/weather-station/weatherbackground.png');
    background-repeat: no-repeat;
    background-size: 240px 36px;
    margin: -20px auto 15px;
  }

  .material-box-left-view {
    width: 100%;
    height: calc(100% - 40px);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;

    .material-box-left-view-leftimg {
      width: 200px;
      height: 100%;
      // background-image: url('~@/assets/weather-station/leftviewleftimg.png');
      background-repeat: no-repeat;
      background-size: 200px 100%;
    }

    .material-box-left-view-rightcontent {
      width: 100%;
      height: 100%;

      .material-box-left-view-rightcontent-top {
        width: 100%;
        height: 360px;
        padding: 20px 10px 10px;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        background-repeat: no-repeat;
        background-size: 100% 360px;
        background: #ffffff;
        box-shadow: 0 6px 10px 0px rgba(0, 21, 41, 0.05);
        border-radius: 6px;

        .box-left-lineone {
          width: 330px;
          height: 330px;
          margin-left: 10px;
          display: flex;
          align-items: center;
          justify-content: center;

          .wind-direction {
            width: 310px;
            height: 310px;
            // background-color: #023d5a;
            background-image: url("~@/assets/weather-station/qiuqiu.png");
            background-size: 310px;
            background-repeat: no-repeat;
            background-position: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            line-height: 30px;
            color: #ffffff;

            .wind-direction-two {
              width: 120px;
              height: 30px;
              line-height: 30px;
              background-color: #00000065;
              text-align: center;
              border-radius: 20px;
              border: #a8c1e6 1px solid;
              white-space: nowrap;
              color: #ffffff;
            }
          }
        }

        .box-left-linetwo {
          width: calc(100% - 350px);
          max-height: 345px;
          margin-bottom: 10px;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          align-items: flex-start;
          align-content: flex-start;
          padding: 0 23px;
          overflow: auto;

          .left-linetwo-item {
            width: 48%;
            padding: 10px 0;
            background-color: #d6ecff;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            color: #4381b5;
            border-radius: 6px;
            .image-line {
              height: 70px;
              width: 70px;
            }

            .mesge-line {
              text-align: center;
              white-space: nowrap;
              line-height: 20px;
              font-weight: 700;
            }
          }
        }
      }

      .box-left-linethree {
        width: 100%;
        height: calc(100% - 335px);
        margin-top: 15px;
        overflow: hidden;
        background: #ffffff;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 20px;
        box-shadow: 0 6px 10px 0px rgba(0, 21, 41, 0.05);
        border-radius: 6px;

        .chance-type {
          height: 40px;
          margin-bottom: 20px;
          padding-top: 5px;
          padding-bottom: 5px;
          display: flex;
          align-items: center;
          overflow: hidden;

          .chance-type-item {
            margin-right: 5px;
            width: 145px;
            height: 30px;
            // border: #ffffff 1px solid;
            text-align: center;
            white-space: nowrap;
            // background-image: url('~@/assets/weather-station/chancetypebut1.png');
            border: 1px solid;

            background-repeat: no-repeat;
            background-size: 100% 100%;
            border-radius: 2px;
            color: #4381b5;
            background: initial;
            border-color: #4381b5;
            cursor: pointer;
            line-height: 24px;
            padding: 2px 25px;
          }

          .chance-type-item-select {
            margin-right: 5px;
            width: 145px;
            height: 30px;
            border: 1px solid;
            text-align: center;
            white-space: nowrap;
            border-radius: 2px;
            background: initial;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
            line-height: 24px;
            padding: 2px 25px;
            color: #2e5372;
            font-weight: bolder;
          }
        }

        .nowzheachrt {
          width: calc(100% - 10px);
          padding: 0 18px;
          height: calc(100% - 60px);
          box-sizing: border-box;
          // background-color: chartreuse;
        }

        .nowzheachrt-ds {
          display: flex;
          justify-content: center;
          align-items: center;

          h2 {
            font-size: 27px;
            letter-spacing: 4px;
          }
        }
      }
    }
  }
}

.material-box-other {
  width: 380px;
  height: 100%;
  padding: 0 15px;
  background-color: #ffffff;
  box-shadow: 0 6px 10px 0px rgba(0, 21, 41, 0.05);
  border-radius: 6px;

  .material-box-other-title {
    width: 100%;
    height: 50px;
    margin-top: 20px;
    font-size: 24px;
    line-height: 50px;
    text-align: center;
    color: #4381b5;
    font-weight: bolder;
  }

  .material-box-other-date {
    width: 100%;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    color: #4381b5;
  }

  .material-box-other-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;

    .material-box-other-list-item {
      width: 170px;
      padding: 15px 0;
      margin-bottom: 10px;
      background-repeat: no-repeat;
      background-color: #d6ecff;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      &:nth-child(2n-1) {
        margin-right: 1px;
      }

      .material-box-other-list-item-title {
        line-height: 18px;
        // height: 18px;
        color: #4381b5;
        letter-spacing: 2px;
        font-size: 18px;
        line-height: 18px;
        text-align: center;
      }

      .material-box-other-list-item-message {
        height: 48px;
        line-height: 48px;
        color: #4381b5;
        font-size: 24px;
        text-align: center;
      }
    }
  }
}

::v-deep .main,
::v-deep .module,
::v-deep .tableSlot {
  height: 100% !important;
}
</style>
